<template>
  <view class="box">
      <view class="title">
        专栏标题:{{detail.title}}
      </view>
      <view class="img">
        <view class="user-avatar">
          <image :src="detail.avatar" mode="heightFix">         </image>
          <view class="user-name">
            {{detail.nickname}}
          </view>
        </view>
        <view   class="banner" >
        <image :src="detail.preview" mode=""         ></image>
        <view class="user-date">
          发布时间:{{detail.createdOn}} 浏览量 {{detail.browseNum}}
        </view>
        </view>
      </view>
      <view class="topic">
        <view class="topic-title">
          话题:
        </view>
        <view class="topic-content">
          内容
        </view>
      </view>
       <view class="topic">
        <view class="topic-title">
          简介:{{detail.introduction}}
        </view>
        <view class="topic-content">
          简介内容:{{detail.fileInfos[0].content}}
        </view>
      </view>

      <view class="work-end">
         <view class="">
       	<u-icon class="message-icon" name="eye" size="30"></u-icon>
       	<text>{{detail.browseNum}} 条阅读量</text>
       </view>
       <view class="">
       	<u-icon class="message-icon" name="chat" size="30"></u-icon>
       	<text>{{detail.commentNum}} 条评论</text>
       </view>
       <view class="">
       	<u-icon v-if="progressData.isLike" class="message-icon"  @click="handleIsLike(false)" name="thumb-up-fill" size="30"></u-icon>
       	<u-icon v-else @click="handleIsLike(true)" class="message-icon" name="thumb-up" size="30"></u-icon>
       	<text>{{detail.likeNum}} 人点赞</text>
   </view>
      </view>
  </view>
</template>

<script>
  import { getPersonalWorkDetail } from '@/API/honor.js'
  export default {
    data() {
      return {
        detail:[]
      }
    },
    methods: {
      async getPersonalWorkDetail(id) {
        const {data} = await getPersonalWorkDetail(id)
        console.log('data=====>',data)
        this.detail = data
      }
    },
    onLoad(options) {
      console.log('options--->',options)
      this.getPersonalWorkDetail(options.id)
    }
  }
</script>

<style  lang="scss" scoped>
  .box {
    padding: 12rpx 12rpx;
    .title {
      margin: 32rpx 12rpx 0;
      font-size: 48rpx;
    }
    .img {
      margin: 16rpx;
      .user-avatar {
        height: 60rpx;
        position: relative;
        image {
          height: 60rpx;
          width:60rpx;
          border-radius:50% ;
          background-color: pink;
          margin-right: 10rpx;
        }
        .user-name {
          display: inline-block;
          font-size: 32rpx;
          position: relative;
          top:-16rpx;
        }

      }
    }
    .banner {
      position: relative;
      padding-bottom: 50rpx;
      image {
        width: 100%;
      }
      .user-date {
        display: inline-block;
        position: absolute;
        left: 0rpx;
        bottom: 0;
      }
    }
    .work-end {
      // display: flex;
    }
  }
</style>
